<template>
	<up-list @scrolltolower="scrolltolower">
		<up-empty :iconSize="150" mode="order" text="当前暂无配载单" v-if="orderList.length === 0"></up-empty>
		<up-list-item v-for="item in orderList" :key="item.id">
			<view class="header-huoyuan">
				<view class="huoyuan-all">
					<view class="all-1">
						所属项目：{{ item.projectName }}
					</view>
					<view class="orderId">
						<up-copy :content="item.billId">
							<text>订单号:{{ item.billId }}</text>
						</up-copy>
					</view>
					<view class="orderId">
						<up-copy :content="item.billNo">
							<text>配载单号:{{ item.billNo }}</text>
						</up-copy>
					</view>
					<view class="all-box">
						<view class="all-left">
							<view class="all-2">
								装货时间：{{ item.shipmentStartTime }}
							</view>
							<view class="all-3">
								<view class="left-3">
									<view class="left-3-1">
										<view class="all-3-1">
											装
										</view>
										<view class="all-3-2">
											{{ item.shipperaddress?item.shipperaddress:showAddress(item,'initialAddress') }}
										</view>
									</view>
									<view class="left-3-2">
										<image src="/static/images/icon/juli.png" mode=""></image>
										<view class="left-3-2-2" v-if="item.billMode == 'APPOINT'">
											指派模式
										</view>
										<view class="left-3-2-2" v-if="item.billMode == 'GRAB'">
											抢单模式
										</view>
									</view>
									<view class="left-3-3">
										<view class="all-3-3-1">
											卸
										</view>
										<view class="all-3-3-2">
											{{ item.consigneeaddress?item.consigneeaddress:showAddress(item,'endAddress') }}
										</view>
									</view>
								</view>
								<view class="right-3">
									<view class="right-3-1">
										{{ item.goodsName }}
									</view>
								</view>

							</view>
							<view class="all-4">
								<view class="all-4-1">
									{{ item.goodsCountShow }}
								</view>
								<view class="all-2">
									结束时间：{{ item.shipmentEndTime }}
								</view>
							</view>
						</view>
						<view v-if="item.status == 'RECEIVED_ORDER' && role === 'driver'" class="all-right"
							@click="ReceingOrders(item, '起运')">
							<view class="right-text">
								起运
							</view>
						</view>
						<view v-if="item.status == 'PROGRESS' && role === 'driver'" class="all-right"
							@click="ReceingOrders(item, '到达')">
							<view class="right-text">
								到达
							</view>
						</view>
						<!-- <view v-if="item.status == 'PROGRESS' && role === 'driver'" style="display: flex;justify-content: space-around;
							align-items: center;flex-direction: column;">
							<view class="right-text" style="background-color: #1e90ff;height: 80px;width: 50px;display: flex;
									justify-content: center;align-items: center;color: #fff;" @click="ReceingOrders(item, '到达')">
								到达
							</view>
							<view class="right-text" style="background-color: aquamarine;height: 80px;width: 50px;display: flex;
									justify-content: center;align-items: center;color: #fff;" @click="goPosition(item)">
								轨迹
							</view>
						</view> -->
						<view
							v-if="(item.status == 'COMPLETED' || item.status == 'UPLOAD_RECEIPT') && role === 'driver'"
							class="all-right" @click="ReceingOrders(item, '上传回单')">
							<view class="right-text">
								回单
							</view>
						</view>
					</view>
				</view>
			</view>

		</up-list-item>
		<LoadMore :status="status" v-if="orderList.length !== 0"></LoadMore>
	</up-list>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import LoadMore from "@/components/LoadMore.vue"
import {
	getWaybillClock,
	DepartureWaybill,
	ReachWaybill,
	receiptWaybill
} from "@/api/driver.js"
import {
	ref
} from "vue"
import {
	useUserStore
} from '@/store'
import {
	storeToRefs
} from "pinia"


const emit = defineEmits(['HitBottom', "reLoad"])


/* hooks */
const {
	role
} = storeToRefs(useUserStore())


/* 数据 */
const {
	orderList,
	status,
	getListParams
} = defineProps({
	orderList: {
		type: Array,
		default: []
	},
	status: {
		type: String,
		default: "loadmore"
	},
	getListParams: {
		type: Object,
		default: {
			currPage: 1,
			limit: 10,
			status: 'RECEIVED_ORDER'
		}
	},
	hasNextPage: {
		type: Boolean,
		default: false
	}
})

const uToastRef = ref(null)

/* 函数 */
// 没有详细地址时显示省市区
const showAddress = (item, str) => {
	let address = JSON.parse(item[str])
	return address.provinceText + address.cityText + address.countyText + (address.text ? address.text : '')
}
// 地图
const goPosition = (item) => {
	uni.navigateTo({
		url: `/package_mine/pages/position/map?endAddress=${item.endAddress}&id=${item.id}`
	})
}
// 触底刷新
const scrolltolower = () => {
	emit('HitBottom')
}
const ReceingOrders = async (item, name) => {
	const params = {
		id: item.id,
		text: name
	}
	uToastRef.value.show({
		message: '请稍等...',
		type: 'loading',
		duration: -1
	})
	const res = await getWaybillClock(params)
	uToastRef.value.hide()
	if (res.code === 200) {
		const data = res.data
		// 检查三个字段中是否有至少一个为1
		if (data.shippedNum == '1' || data.receiptedNum == '1' || data.relevantPic == '1') {
			let dataList = {
				shippedNum: data.shippedNum,
				receiptedNum: data.receiptedNum,
				relevantPic: data.relevantPic,
			}
			let flag = item.status === 'COMPLETED' ? 0 : 1
			// 有字段为1，跳转页面
			uni.navigateTo({
				url: '/pages/work/checkVerification?item=' +
					JSON.stringify(item) + '&text=' + name + '&dataList=' + JSON.stringify(dataList) + '&flag=' + flag
			})
		} else {
			// 三个字段都不为1，做其他处理
			handleNoValidFields(item, name)
		}
	}
}
// 三个字段都不为1时的处理
const handleNoValidFields = async (item, name) => {
	// 或者执行其他业务逻辑
	console.log('三个字段都不为1，执行其他处理', item, name)
	let params = {
		id: item.id,
		text: name,
		goodsCount: item.goodsCount
	}
	console.log(params)
	if (name == '起运') {
		console.log(1);
		uToastRef.value.show({
			message: '起运中，请稍等...',
			type: 'loading',
			duration: -1
		})
		let res = await DepartureWaybill(params)
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: "top",
				message: '配货单已起运',
				type: 'success',
				duration: 1000,
				complete() {
					emit('reLoad')
				}
			})
		}
	} else if (name == '到达') {
		console.log(2)
		uToastRef.value.show({
			message: '请稍等...',
			type: 'loading',
			duration: -1
		})
		let res = await ReachWaybill(params)
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: "top",
				message: '配货单已到达',
				type: 'success',
				duration: 1000,
				complete() {
					emit('reLoad')
				}
			})
		}
	} else if (name == '上传回单') {
		console.log(3)
		uToastRef.value.show({
			message: '请稍等...',
			type: 'loading',
			duration: -1
		})
		let res = await receiptWaybill(params)
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: "top",
				message: '配货单已上传回单',
				type: 'success',
				duration: 1000,
				complete() {
					emit('reLoad')
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.header-huoyuan {

	background-color: aliceblue;

	.huoyuan-all {
		margin: 10px 0 10px 18px;
		padding: 15px 0 5px 0;

		.all-1 {
			font-size: 16px;
			font-weight: 400;
			margin: 0 0 7px 0;
		}

		.all-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 25px;

			.all-left {

				.all-2 {
					color: #999;
				}

				.all-3 {
					display: flex;
					margin-top: 12px;

					.left-3 {
						width: 180px;
						margin-right: 10px;

						.left-3-1 {
							display: flex;

							.all-3-1 {
								background-color: green;
								color: white;
								border-radius: 50%;
								padding: 4px 7px;
								font-size: 15px;
								margin-right: 18rpx;
								height: 30px;
							}

							.all-3-2 {
								font-size: 15px;
								align-content: center;
							}
						}

						.left-3-2 {
							display: flex;
							margin: 20px 0;

							image {
								width: 20px;
								height: 20px;
								margin-right: 20px;
							}

							.left-3-2-2 {
								align-content: center;
							}
						}

						.left-3-3 {
							display: flex;

							.all-3-3-1 {
								background-color: red;
								color: white;
								border-radius: 50%;
								padding: 4px 7px;
								font-size: 15px;
								margin-right: 18rpx;
								height: 30px;
							}

							.all-3-3-2 {
								font-size: 15px;
								align-content: center;
							}
						}
					}

					.right-3 {
						padding: 5px;

						.right-3-1 {
							color: dodgerblue;
							font-size: 15px;
							margin-bottom: 4px;
						}

						.right-3-2 {
							font-size: 10px;
							color: #999;
							margin-bottom: 4px;
						}

						.right-3-3 {
							display: flex;

							.right-3-3-0 {
								font-size: 9px;
								color: #999;
								align-content: center;
								margin-right: 2px;
							}

							.right-3-3-1 {
								color: red;
								font-size: 18px;
								margin-right: 5px;
								font-weight: 500;
							}

							.right-3-3-2 {
								font-size: 9px;
								color: #999;
								align-content: center
							}
						}
					}
				}

				.all-4 {
					display: flex;
					margin-top: 20px;
					align-items: center;

					.all-4-1 {
						color: #999;
						font-size: 12px;
						margin-right: 13px;
					}

					.all-4-2 {
						display: flex;
						color: red;

						.all-4-2-1 {
							align-content: center;

							image {
								width: 15px;
								height: 15px;
								margin-right: 5px;
								line-height: 5px;
							}
						}

						.all-4-2-2 {
							align-content: center;
						}

					}
				}
			}

			.all-right {
				background-color: dodgerblue;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50px;

				.right-text {
					color: white;
					font-size: 17px;
					text-align: center;
				}
			}
		}

		.orderId {
			color: #999;
			font-size: 16px;
			margin-bottom: 5px;
		}
	}
}
</style>